<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            关于VueComponent:
                1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
                2.我们只需要写<school/>或者<school></school>，Vue解析时会帮我们创建school组件的实例对象
                    即Vue帮我们执行的：new VueComponent(options)
                3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent!!!!
                4.关于this指向
                    1.组件的配置中
                        data函数 methods函数 watch函数 computed函数,他们的this均是VueComponent实例对象
                    2.new Vue(options)配置中
                        data函数 methods函数 watch函数 computed函数,他们的this均是vm vue实例对象
                5.VueComponent实例对象，以后简称vc  组件实例对象
                    Vue的实例对象 简称vm

         -->
        <div id="root">
            <school></school>
            <hello></hello>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示

            const student = Vue.extend({
                template:`
                    <div>
                        <h2>学生名字：{{studentName}}</h2>
                        <h2>学生年龄：{{studentAge}}</h2>
                    </div>
                `,
                data() {
                    return {
                        studentName:'张三',
                        studentAge:18
                    }
                }
            })
            const school = Vue.extend({
                name:'xuexiao',
                template:`
                    <div>
                        <h2>学校名字：{{schoolName}}</h2>
                        <h2>学校地址：{{schoolAddress}}</h2>
                        <student></student>
                        <button @click='showName'>点我提示学校名字</button>
                    </div>
                `,
                data() {
                    return {
                        schoolName:'清华',
                        schoolAddress:'北京'
                    }
                },
                components:{
                    student
                },
                methods: {
                    showName(){
                        console.log(this.schoolName);
                        console.log(this);//VueComponent
                    }
                },
            })
            console.log('school',school);//构造函数 VueComponent (options) {this._init(options);}

            const hello = Vue.extend({
                template:`
                    <h2>{{nihao}}欢迎你</h2>
                `,
                data() {
                    return {
                        nihao:'hello'
                    }
                }
            })
            const vm = new Vue({
                el:'#root',
                data:{

                },
                components:{
                    school,
                    hello
                }
            })
            console.log(vm)
        </script>
    </body>
</html>